<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>Category</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="createjs.min.js"></script>
        <script src="FoodTable.js"></script>
        <script src="Part.js"></script>
        <script src="Target.js"></script>
        <script>
            var disableClickNew = false;
            
            // Number of question in game play
            var scount = 21;
            
            // Make dynamic position of elements
            var xColumn = 30;
            var yPart1 = 690;
            var yPart2 = yPart1 + 100;
            
            var yTextbox = 120;
            var yTextboxInc = 75;
            
            var stage;
            var queue;
            
            // Data for game
            var scoreNumber = 0;
            var scoreboard;
            var myTable;
            var myScoreboard;
            var myParts = [];
            var partData;
            var myTexts = [];
            var questionPos = 0;
            var myQuestionText;
            var textData;
            var question;
            var previousX = 0;
            var previousY = 0;
            var foodX;
            var foodY;

            function init() {
                //Create a stage by getting a reference to the canvas
                stage = new createjs.Stage("myCanvas");
                
                stage.enableMouseOver();
                queue = new createjs.LoadQueue();
                queue.installPlugin(createjs.Sound);
                queue.addEventListener("complete", handleComplete);
                
                // Load assets for game using
                queue.loadManifest([
                    {id: "putSound", src: "assets/put.wav"},
                    {id: "popSound", src: "assets/pop.mp3"},
                    {id: "victorySound", src: "assets/victory.mp3"},
                    
                    {id: "bgSuccess", src: "assets/victory.jpg"},
                    {id: "bgText", src: "assets/bg-text.png"},
                    {id: "bgTextSuccess", src: "assets/bg-text-sucess.png"},
                    
                    {id: "foodTable", src: "assets/food_table.jpg"},
                    {id: "scoreboard", src: "assets/scoreboard.png"},
                    
                    {id: "bananas", src: "assets/fruits/bananas.png"},
                    {id: "apple", src: "assets/fruits/apple.png"},
                    {id: "fruit", src: "assets/fruits/fruit.png"},
                    {id: "orange", src: "assets/fruits/orange.png"},
                    
                    {id: "cornKernel", src: "assets/grains/corn-kernel.png"},
                    {id: "grains", src: "assets/grains/grains.png"},
                    {id: "greenLentils", src: "assets/grains/green-lentils.png"},
                    {id: "kamut", src: "assets/grains/kamut.png"},
                    
                    {id: "canolaOil", src: "assets/oil/canola-oil.png"},
                    {id: "olive", src: "assets/oil/olive.png"},
                    
                    {id: "beef", src: "assets/proteins/beef.png"},
                    {id: "chicken", src: "assets/proteins/chicken.png"},
                    {id: "fish", src: "assets/proteins/fish.jpg"},
                    {id: "proteins", src: "assets/proteins/proteins.png"},
                    
                    {id: "cabbage", src: "assets/vegetables/cabbage.png"},
                    {id: "cauliflower", src: "assets/vegetables/cauliflower.png"},
                    {id: "leek", src: "assets/vegetables/leek.png"},
                    {id: "vegetable", src: "assets/vegetables/vegetable.png"},
                
                    {id: "milk", src: "assets/water/milk.png"},
                    {id: "coffee", src: "assets/water/coffee.jpg"},
                    {id: "tea", src: "assets/water/tea.jpg"},
                    {id: "water", src: "assets/water/water.jpg"}]);

            }

            function click_myTable(event) {
                
            }

            function updateScore(inc, y) {
                this.scoreboard = new createjs.Bitmap(queue.getResult("scoreboard"));
                var wi = 200;
                var he = 80;
                sizeForBoard(wi, he);
                this.scoreboard.x = (stage.canvas.width - wi) / 2;
                this.scoreboard.y = y;
                stage.addChild(scoreboard);
                
                scoreNumber = scoreNumber + inc;
                var scoreText = new createjs.Text("Score: " + scoreNumber, "17px Arial", "#ffffff");
                
                scoreText.textBaseline = "center";
                scoreText.textAlign = "center";
                scoreText.lineWidth = wi;
                scoreText.x = this.scoreboard.x + (wi / 2);
                scoreText.y = this.scoreboard.y + (he / 2);
                stage.addChild(scoreText);
                
            }

            function sizeForBoard(windowWidth, windowHeight) {
                    var bounds = this.scoreboard.getBounds();
                    var currentWidth = bounds.width;
                    var currentHeight = bounds.height;

                    this.scoreboard.scaleX = windowWidth / currentWidth;
                    this.scoreboard.scaleY = windowHeight / currentHeight;

            };

            function handleComplete(event) {
                
                // Init data for game
                var wiHalf = stage.canvas.width / 2;
                textData = [
                    {name:"vegetables", source:"vegetables", x:wiHalf - 110, y:340, width:110, height:160},
                    {name:"grains", source:"grains", x:wiHalf + 5, y:350, width:105, height:110},
                    {name:"proteins", source:"proteins", x:wiHalf + 5, y:467, width:105, height:110},
                    {name:"fruits", source:"fruits", x:wiHalf - 120, y:503, width:120, height:90},
                    {name:"oil", source:"oil", x:wiHalf - 170, y:270, width:70, height:135},
                    {name:"water", source:"water", x:wiHalf + 80, y:270, width:80, height:130}
                ];
                
                partData = [
                    {imgSource:"milk"},
                    {imgSource:"bananas"},
                    {imgSource:"cabbage"},
                    {imgSource:"kamut"},
                    {imgSource:"leek"},
                    {imgSource:"apple"},
                    {imgSource:"fruit"},
                    {imgSource:"greenLentils"},
                    {imgSource:"orange"},
                    {imgSource:"chicken"},
                    {imgSource:"canolaOil"},
                    {imgSource:"tea"},
                    {imgSource:"grains"},
                    {imgSource:"olive"},
                    {imgSource:"cauliflower"},
                    {imgSource:"beef"},
                    {imgSource:"fish"},
                    {imgSource:"proteins"},
                    {imgSource:"water"},
                    {imgSource:"vegetable"},
                    {imgSource:"coffee"},
                    {imgSource:"cornKernel"}
                ];
                
                questionData = [
                    {question:"Which category this ......... belong?", source:"milk", category:"water"},
                    {question:"Which category this ......... belong?", source:"bananas", category:"fruits"},
                    {question:"Which category this ......... belong?", source:"cabbage", category:"vegetables"},
                    {question:"Which category this ......... belong?", source:"kamut", category:"grains"},
                    {question:"Which category this ......... belong?", source:"leek", category:"vegetables"},
                    {question:"Which category this ......... belong?", source:"apple", category:"fruits"},
                    {question:"Which category this ......... belong?", source:"fruit", category:"fruits"},
                    {question:"Which category this ......... belong?", source:"greenLentils", category:"grains"},
                    {question:"Which category this ......... belong?", source:"orange", category:"fruits"},
                    {question:"Which category this ......... belong?", source:"chicken", category:"proteins"},
                    {question:"Which category this ......... belong?", source:"canolaOil", category:"oil"},
                    {question:"Which category this ......... belong?", source:"tea", category:"water"},
                    {question:"Which category this ......... belong?", source:"grains", category:"grains"},
                    {question:"Which category this ......... belong?", source:"olive", category:"oil"},
                    {question:"Which category this ......... belong?", source:"cauliflower", category:"vegetables"},
                    {question:"Which category this ......... belong?", source:"beef", category:"proteins"},
                    {question:"Which category this ......... belong?", source:"fish", category:"proteins"},
                    {question:"Which category this ......... belong?", source:"proteins", category:"proteins"},
                    {question:"Which category this ......... belong?", source:"water", category:"water"},
                    {question:"Which category this ......... belong?", source:"vegetable", category:"vegetables"},
                    {question:"Which category this ......... belong?", source:"coffee", category:"water"},
                    {question:"Which category this ......... belong?", source:"cornKernel", category:"grains"}
                ];  
                
                updateScore(0, 110);
                
                
                
                // Title
                var myTitle = new createjs.Text("FOOD CATEGORIES", "25px Arial", "#000");
                myTitle.textBaseline = "top";
                myTitle.x = (stage.canvas.width) / 2;
                myTitle.y = 40;
                myTitle.textAlign = "center";
                stage.addChild(myTitle);
                
                // Description
                var myDescription = new createjs.Text("Drag images on bottom to suitable places on food category table.", "13px Arial", "#000");
                myDescription.textBaseline = "top";
                myDescription.lineWidth = stage.canvas.width - 30;
                myDescription.x = (stage.canvas.width) / 2;
                myDescription.y = 70;
                myDescription.textAlign = "center";
                stage.addChild(myDescription);
                
                // Image when game finished.
                myBgSuccess = new createjs.Bitmap(queue.getResult("bgSuccess"));
                var widt = 280;
                var heig = 350;
                myBgSuccess.x = (stage.canvas.width - widt) / 2
                myBgSuccess.y = 100;
                var bounds = myBgSuccess.getBounds();
                var currentWidth = bounds.width;
                var currentHeight = bounds.height;
                myBgSuccess.scaleX = widt / currentWidth;
                myBgSuccess.scaleY = heig / currentHeight;
                
                
                // Food table.
                myTable = new FoodTable("foodTable");
                myTable.size(630, 531);
                myTable.appearSpin((stage.canvas.width), (stage.canvas.height));
                myTable.addClickListener(click_myTable);
                
                //
                for(var index in textData) {
                    myTexts[textData[index].source] = new Target(
                            textData[index].name + " - " + textData[index].description, 
                            "#ffffff", "bgText", textData[index].width, textData[index].height);
                    myTexts[textData[index].source].position(textData[index].x, textData[index].y);
                    stage.removeChild(myTexts[textData[index].source]);
                }

                for(var index in partData) {
                    var part = new Part(partData[index].imgSource);
                    part.dragger.addEventListener("pressup", handlePressUpParts);
                    part.dragger.addEventListener("pressmove", handlePressMoveParts);
                    var wid = 200;
                    part.size(wid, 300);
                    foodX = (stage.canvas.width - wid) / 2;
                    foodY = 780;
                    part.position(foodX, foodY);
                    part.removeChild();
                    myParts[partData[index].imgSource] = part;
                }
                
                if (disableClickNew === false) {
                    createjs.Sound.play("popSound");
                    for(var index in textData) {
                        stage.addChild(myTexts[textData[index].source]);

                        myTexts[textData[index].source].appearLine(
                                myTable.bmp.x, myTable.bmp.y,
                                myTexts[textData[index].source].dragger.x,
                                myTexts[textData[index].source].dragger.y);
                    }
                    
                    for(var index in myParts) {
                        myParts[index].appearLine(
                                myTable.bmp.x, myTable.bmp.y,
                                myParts[index].dragger.x,
                                myParts[index].dragger.y);
                    }
                    nextQuestion();
                }
                
                // Set speed of game (Frame per second)
                createjs.Ticker.setFPS(24);
                createjs.Ticker.addEventListener("tick", tick);

            }
            
            // Move to next question
            function nextQuestion() {
                
                stage.removeChild(myQuestionText);
                myQuestionText = new createjs.Text(questionData[questionPos].question, "25px Arial", "#000");
                myQuestionText.textBaseline = "top";
                myQuestionText.x = (stage.canvas.width) / 2;
                myQuestionText.y = 730;
                myQuestionText.textAlign = "center";
                stage.addChild(myQuestionText);
                
                myParts[partData[questionPos].imgSource].addChild();
            }

            // get food element with location (x, y)
            function getSource(x, y) {
                for(var index in myParts) {
                    if (myParts[index].dragger.x === x
                            && myParts[index].dragger.y === y) {
                        return myParts[index];
                    }
                }
                return "";
            }

            // handle when you drop a food.
            function handlePressUpParts(event) {
                var part = getSource(event.currentTarget.x, event.currentTarget.y);
                for(var index in textData) {
                    // Check where food is hit.
                    if (myTexts[textData[index].source].hitTest(event.stageX, event.stageY)) {
                        if (part.source === questionData[questionPos].source 
                                && textData[index].source === questionData[questionPos].category) { // Matched food and category.
                            // Play a sound.
                            createjs.Sound.play("putSound");
                            // Remove food outside canvas.
                            part.removeChild();
                            // Increase score.
                            updateScore(5, 110);
                            
                            // Check if game is end.
                            scount--;
                            if (scount > 0) { // Move to next question
                                questionPos++;        
                                nextQuestion();
                                
                            } else { // You Win!
                                // Play victory sound.
                                createjs.Sound.play("victorySound");
                                
                                
                                disableClickNew = true;
                                stage.removeAllChildren();
                                
                                stage.addChild(myBgSuccess);
                                for(var index in myParts) {
                                    myParts[index].addChild();
                                    myParts[index].appearLine(
                                            myParts[index].dragger.x,
                                            myParts[index].dragger.y,
                                            myTable.bmp.x, myTable.bmp.y
                                            );
                                    myParts[index].disappearScale();
                                }
                                
                                updateScore(5, 450);
                                stage.update();
                            }
                        }
                    }
                }
                // continue
                for(var index in partData) {
                    if (partData[index].imgSource === part.source) {
                        part.dragger.x = foodX;
                        part.dragger.y = foodY;
                        stage.update();
                    }
                }
            }

            

            function handlePressMoveParts(event) {
                previousX = event.currentTarget.x;
                previousY = event.currentTarget.y;
            }

            function handleClick(event) {

                createjs.Sound.play("putSound");
            }

            function tick() {
                stage.update();
            }

        </script>
    </head>
    <body onload="init()">
        <canvas id="myCanvas" width="800" height="1000">
            Alternative Content
        </canvas>
    </body>
</html>
